<template>
  <Sidebar ref="sidebar" title="主题">
    <div class="themeList">
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="group in groupList" :key="group.name" :label="group.name" :name="group.name" />
      </el-tabs>
      <div
        class="themeItem"
        v-for="item in currentList"
        :key="item.value"
        @click="useTheme(item)"
        :class="{ active: item.value === theme }"
      >
        <div class="imgBox">
          <img :src="themeMap[item.value]" alt="" />
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </Sidebar>
</template>

<script>
import Sidebar from "./Sidebar.vue"
import { themeList } from "simple-mind-map/src/constants/constant"
import { storeConfig } from "../../../utils/mind-store"
import { themeMap } from "../../../config/constant"
import customThemeList from "../../../customThemes"

/**
 * @Desc: 主题
 */
export default {
  name: "Theme",
  components: {
    Sidebar
  },
  props: {
    mindMap: {
      type: Object
    }
  },
  data() {
    return {
      themeList: [...themeList, ...customThemeList].reverse(),
      themeMap,
      theme: "",
      activeName: "",
      groupList: []
    }
  },
  computed: {
    currentList() {
      return this.groupList.find((item) => {
        return item.name === this.activeName
      }).list
    }
  },
  watch: {
    activeSidebar(val) {
      if (val === "theme") {
        this.theme = this.$bus.getTheme()
        this.handleDark()
        this.$refs.sidebar.show = true
      } else {
        this.$refs.sidebar.show = false
      }
    }
  },
  created() {
    this.initGroup()
    this.theme = this.$bus.getTheme()
    this.handleDark()
    this.$bus.$on("open_sidebar_theme", this.handleViewThemeChange)
  },
  beforeUnmount() {
    this.$bus.$off("open_sidebar_theme", this.handleViewThemeChange)
  },
  methods: {
    handleViewThemeChange() {
      this.theme = this.$bus.getTheme()
      this.$refs.sidebar.show = true
    },

    initGroup() {
      const baiduThemes = [
        "default",
        "skyGreen",
        "classic2",
        "classic3",
        "classicGreen",
        "classicBlue",
        "blueSky",
        "brainImpairedPink",
        "earthYellow",
        "freshGreen",
        "freshRed",
        "romanticPurple",
        "pinkGrape",
        "mint"
      ]
      const baiduList = []
      const classicsList = []
      this.themeList.forEach((item) => {
        if (baiduThemes.includes(item.value)) {
          baiduList.push(item)
        } else if (!item.dark) {
          classicsList.push(item)
        }
      })
      this.groupList = [
        {
          name: this.$t("theme.classics"),
          list: classicsList
        },
        {
          name: this.$t("theme.dark"),
          list: this.themeList.filter((item) => {
            return item.dark
          })
        },
        {
          name: this.$t("theme.simple"),
          list: baiduList
        }
      ]
      this.activeName = this.groupList[0].name
    },

    useTheme(theme) {
      if (theme.value === this.theme) return
      this.theme = theme.value
      this.handleDark()
      const customThemeConfig = this.$bus.mindMap.getCustomThemeConfig()
      const hasCustomThemeConfig = Object.keys(customThemeConfig).length > 0
      if (hasCustomThemeConfig) {
        this.$confirm(this.$t("theme.coverTip"), this.$t("theme.tip"), {
          confirmButtonText: this.$t("theme.cover"),
          cancelButtonText: this.$t("theme.reserve"),
          type: "warning",
          distinguishCancelAndClose: true,
          callback: (action) => {
            if (action === "confirm") {
              this.$bus.mindMap.setThemeConfig({}, true)
              this.changeTheme(theme, {})
            } else if (action === "cancel") {
              this.changeTheme(theme, customThemeConfig)
            }
          }
        })
      } else {
        this.changeTheme(theme, customThemeConfig)
      }
    },

    changeTheme(theme, config) {
      console.log("theme", theme)
      this.$bus.$emit("showLoading")
      this.$bus.setTheme(theme.value)
      storeConfig({
        theme: {
          template: theme.value,
          config
        }
      })
    },

    handleDark() {}
  }
}
</script>

<style lang="less" scoped>
.themeList {
  padding: 20px;
  padding-top: 0;

  &.isDark {
    .name {
      color: #fff;
    }
  }

  .themeItem {
    width: 100%;
    cursor: pointer;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 20px;
    padding-bottom: 20px;
    transition: all 0.2s;
    border: 1px solid transparent;

    &:last-of-type {
      border: none;
    }

    &:hover {
      box-shadow:
        0 1px 2px -2px rgba(0, 0, 0, 0.16),
        0 3px 6px 0 rgba(0, 0, 0, 0.12),
        0 5px 12px 4px rgba(0, 0, 0, 0.09);
    }

    &.active {
      border: 1px solid #67c23a;
    }

    .imgBox {
      width: 100%;

      img {
        width: 100%;
      }
    }
    .name {
      text-align: center;
      font-size: 14px;
    }
  }
}
</style>
